<template>
    <div>
        <div class="menu">
            <el-button type="text" @click="dialogVisible = true">点击打开UPLOAD菜单</el-button>
            <el-dialog title="请选择一张jpg或png图片上传" :visible.sync="dialogVisible" width="30%" >
                <span>
                    <label for="" type="button" class="btn">
                        <span>选择图片</span>
                        <input id="input" type="file" @change="changeFile" multiple />
                    </label>
                    <button id="upload" class="btn" style="margin-left: 30px; width: 60px;top:-10px;" @click="upload">上传</button>
                </span>
            </el-dialog>
        </div>
        <div class="list">
            <el-table :data="currentList" style="width: 100%">
                <el-table-column label="图片ID" width="180">
                    <template #default="scope">
                        <span>{{ scope.row.fileId }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="图片名称" width="180">
                    <template #default="scope">
                        <span>{{ scope.row.fileName }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="大小" width="180">
                    <template #default="scope">
                        <span>{{ scope.row.fileSize }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="类型">
                    <template #default="scope">
                        <span>{{ scope.row.fileType }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="最后一次修改时间">
                    <template #default="scope">
                        <span>{{ scope.row.lastModifiedDate }}</span>
                    </template>
                </el-table-column>
                <el-table-column label="缩略图">
                    <template #default="scope">
                        <el-image style="width: 100px; height: 100px" :src="scope.row.formData">
                        </el-image>
                    </template>
                </el-table-column>
                <el-table-column label="操作">
                    <template #default="scope">
                        <el-button size="mini" type="danger" @click="deleteChapter(scope.row.fileId)">删除</el-button>
                    </template>
                </el-table-column>
            </el-table>

        </div>
        <el-pagination background :total="total" :page-size="currentSize" @current-change="changeList" :current-page="currentPage"
            layout="prev, pager, next">
        </el-pagination>
    </div>
</template>

<script>
import axios from 'axios'
export default {
    data() {
        return {
            fileList: [],
            currentList: [],
            total: 0,
            currentSize: 3,
            dialogVisible: false,
            file:{},
            content:"",
            type:"",
            currentPage:1
        }
    },
    methods: {
        upload(){
            let formData=new FormData()
            formData.append('file',this.content)
            axios.post('http://localhost:3000/upload',{"fileId":Math.random(),"formData":formData.get('file'),"fileType":this.type,"fileName":this.file.name,"fileSize":this.file.size,"lastModifiedDate":this.file.lastModifiedDate})
            .then(res=>{
              if (res.status == 200){
                console.log("upload",res.data);
              }
              if (res.data.token) {
                  localStorage["token"] = res.data.token;
                  alert("success");
              }
              this.getList()
            })
        },
        changeFile(e){
            this.file=e.target.files[0];
            // console.log(this.file);
            let reader=new FileReader();
            reader.readAsDataURL(e.target.files[0]);
            reader.onload=()=>{
              this.content=reader.result;
              this.type=e.target.files[0].type;
            }
        },
        getList() {
            axios.get("http://localhost:3000/getlist").then(res => {
                console.log(res.status)
                if (res.status == 200) {
                    this.fileList = res.data
                    this.total = this.fileList.length
                    for (let i = 0; i < this.currentSize; i++) {
                        this.currentList[i] = this.fileList[i];
                    }
                    console.log(this.currentList)
                    this.changeList(this.currentPage)
                }
            })
        },
        deleteChapter(id) {
            console.log("deleteId", id);
            axios.post("http://localhost:3000/del", {
                id: id
            }).then(res => {
                if (res.data == 'success') {
                    let index = '';
                    for (let i = 0; i < this.currentList.length; i++) {
                        if (this.currentList[i].fileId == id) {
                            index = i;
                        }
                    }
                    this.currentList.splice(index, 1)
                    this.getList()

                }
            })


        },
        changeList(num) {
            
            this.currentPage=num;
            console.log(this.currentPage);
            this.currentList = []
            let index = 0;
            let last = 3;
            
            if (num * this.currentSize >= this.total) {
                last = this.total;
            }else if(num * this.currentSize < this.total){
                last=num * this.currentSize;
            }
            console.log("index",index,"last",last);
            for (let i = (num - 1) * this.currentSize; i < last && index <= 3; i++) {
                this.currentList[index++] = this.fileList[i];
            }
            console.log("current", this.currentList);
            console.log("fileList",this.fileList);
        }

    }, mounted() {
        this.getList()
    }

}
</script>
<style>
.list {
    margin: 0 auto;
    border: 5px dashed paleturquoise;
    width: 100%;
    height: 100%;
}
.menu{
    margin: 0 auto;
    border: 5px dashed pink;
    width: 100%;
    height: 20px;
    padding-bottom: 8px;
}
* {
    margin:0 auto;
    z-index: 0;
  
  }
    
  
    label input {
      position: absolute;
      left: 0;
      top: -300;
      opacity: 0;
  }
    .btn {
      left:100px;
      top:0px;
      width: 80px;
      height: 30px;
      background-color: rgb(49, 132, 241);
      border: 0px;
      border-radius: 10px;
      color: white;
      position: relative;
      overflow: hidden;
      text-align: center;
      vertical-align: center;
      border-radius: 5px;
      display: inline-block;
  
  }


  
</style>
